<template>
  <el-dialog
    title="历史派单"
    width="1200px"
    :visible.sync="visible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :append-to-body="true"
    :show-close="false"
  >
    <el-table :data="tableData" :loading="loading" height="520px" style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="scope">
          <div class="info-wrap">
            <div class="info-item">
              <el-divider content-position="left">朋友圈描述</el-divider>
              <div class="desc">{{scope.row.momentsDesc}}</div>
            </div>
            <div class="info-item">
              <el-divider content-position="left">案例展示描述</el-divider>
              <div class="desc">{{scope.row.effectDesc}}</div>
              <el-divider content-position="left">案例展示图片</el-divider>
              <div class="pic-box">
                <el-image
                  :src="scope.row.effectPictureUrl + '?v=' + new Date().getTime()"
                  :preview-src-list="[scope.row.effectPictureUrl + '?v=' + new Date().getTime()]"
                >
                  <div slot="error" class="image-slot">暂无图片</div>
                </el-image>
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="订单名称"></el-table-column>
      <el-table-column prop="income" label="订单收益"></el-table-column>
      <el-table-column prop="unit" label="收益单位"></el-table-column>
      <el-table-column prop="type" label="订单类型">
        <template slot-scope="scope">
          <span>{{orderType[scope.row.type]}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="订单状态">
        <template slot-scope="scope">
          <span>{{
            scope.row.status === 0 ? '未接单' :
            scope.row.status === 1 ? '已接单' :
            scope.row.status === 2 ? '待审核' :
            scope.row.status === 3 ? '审核通过' :
            scope.row.status === 4 ? '审核未通过' :
            scope.row.status === 5 ? '已完成' :
            scope.row.status === 6 ? '已关闭' :
            scope.row.status === 7 ? '终止订单' :
            ''
            }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="updateTime" label="更新时间"></el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button type="primary" size="small"
                     @click="onInfo({index: scope.$index, row: scope.row})"
          >查看凭证</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="margin-top: 20px"
      layout="prev, pager, next, jumper, total"
      :page-size="queryForm.limit"
      :current-page="queryForm.page"
      :total="pagination.total"
      @current-change="pageChange">
    </el-pagination>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="close">关 闭</el-button>
    </div>

    <!-- 审核操作 -->
    <audit-info
      v-if="visibleInfo"
      :visible="visibleInfo"
      :id="orderId"
      @beforeClose="beforeClose"
      @closeOrder="closeOrder"
    ></audit-info>
  </el-dialog>
</template>

<script>
  import {mapActions} from 'vuex'
  import util from '@/libs/util.js'
  import AuditInfo from './audit-info'

  export default {
    name: 'history-order',
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      info: {
        type: Object,
        default: null
      }
    },
    data() {
      return {
        loading: false,
        visibleInfo: false,
        orderId: '',
        queryForm: {
          page: 1,
          limit: 10,
          userId: ''
        },
        pagination: {
          total: 0
        },
        tableData: [],
        orderType: {}
      }
    },
    created () {
      const dict = util.cookies.get('dictionary')
      if (dict) {
        let types = JSON.parse(dict).orderType
        types.forEach(item => {
          this.orderType[item.code] = item.value
        })
      }

      this.queryForm.userId = this.info.userId
      this.queryList()
    },
    components: {
      AuditInfo
    },
    methods: {
      ...mapActions('d2admin/sys.person', [
        'personHistoryOrder'
      ]),
      // 查询历史订单
      queryList () {
        this.loading = true
        this.personHistoryOrder(this.queryForm).then(res => {
          this.loading = false
          this.tableData = res.list
          this.pagination.total = res.totalCount
        })
      },
      // 审核订单
      onInfo ({ index, row }) {
        this.visibleInfo = true
        this.orderId = row.id
      },
      // 关闭订单
      closeOrder (visible) {
        this.visibleInfo = visible
      },
      beforeClose (visible) {
        this.visibleInfo = visible
      },
      // 切换分页
      pageChange (curr) {
        this.queryForm.page = curr
        this.queryList()
      },
      // 关闭
      close() {
        this.$emit('close', false)
      }
    }
  }
</script>

<style lang="scss">
  .el-table {
    .info-wrap {
      display: flex;
      .info-item {
        flex: 1;
        padding: 10px;
        .desc {
          border: 1px solid #DCDFE6;
          padding: 10px;
          border-radius: 10px;
          height: 100px;
          overflow-y: auto;
        }
        .pic-box {
          width: 366px;
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          .el-image {
            overflow: hidden;
            background-color: #fff;
            border: 1px solid #c0ccda;
            border-radius: 6px;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            width: 114px;
            height: 114px;
            margin: 0 8px 8px 0;
            display: inline-block;
            text-align: center;
            line-height: 114px;
            color: #c5c5c5;
          }
        }
      }
    }
  }
</style>
